<template>
  <div class="pie-echarts">
    <base-echarts :options="options" />
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import baseEcharts from './base-echarts.vue'
  import type { EChartsOption } from 'echarts'
  import type { IEchartValueType } from '../types'

  interface IProps {
    pieData: IEchartValueType[]
  }

  const $props = withDefaults(defineProps<IProps>(), {})

  const options = computed<EChartsOption>(() => ({
    // title: {
    //   text: '销售饼图',
    //   // subtext: '销售饼图副标题',
    //   left: 'center',
    //   top: 10
    // },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'horizontal',
      left: 'left',
      // top: 35
      itemGap: 5
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        top: '40%',
        radius: '85%',
        center: '50%',
        data: $props.pieData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        itemStyle: {
          borderWidth: 5,
          borderColor: '#fff'
        }
      }
    ]
  }))
</script>

<style lang="scss" scoped></style>
